<!--
 * @Description: 原子组件-趋势标记
-->
<template>
  <span class="my-trend" :class="'my-trend--' + type">
    <el-icon v-if="iconType == 'P'" class="my-trend-icon"><el-icon-top /></el-icon>
    <el-icon v-if="iconType == 'N'" class="my-trend-icon"><el-icon-bottom /></el-icon>
    <el-icon v-if="iconType == 'Z'" class="my-trend-icon"><el-icon-right /></el-icon>
    <em class="my-trend-prefix">{{ prefix }}</em>
    <em class="my-trend-value">{{ modelValue }}</em>
    <em class="my-trend-suffix">{{ suffix }}</em>
  </span>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  prefix: {
    type: String,
    default: ''
  },
  suffix: {
    type: String,
    default: ''
  },
  reverse: {
    type: Boolean,
    default: false
  }
})

const iconType = computed(() => {
  if (props.modelValue == 0) return 'Z'
  if (props.modelValue < 0) return 'N'
  return 'P'
})

const type = computed(() => {
  if (props.modelValue == 0) return 'Z'
  if (props.modelValue < 0) {
    return props.reverse ? 'P' : 'N'
  }
  if (props.modelValue > 0) {
    return props.reverse ? 'N' : 'P'
  }
})
</script>

<style lang="scss" scoped>
.my-trend {
  display: flex;
  font-size: 16px;
  font-weight: bold;
  align-items: center;
  em {
    font-style: normal;
  }
}
.my-trend-icon {
  margin-right: 2px;
}
.my-trend-prefix {
  margin-right: 2px;
}
.my-trend-suffix {
  margin-left: 2px;
}
.my-trend--P {
  color: #f56c6c;
}
.my-trend--N {
  color: #67c23a;
}
.my-trend--Z {
  color: #555;
}
</style>
